<template>
    <div class="fillcontain">
        <div class="header_container">
            <el-breadcrumb separator="/">
        			<el-breadcrumb-item :to="{ path: '/userList' }">留言板</el-breadcrumb-item>
        			<el-button type="primary" @click="singOut()" class="submit_btn">退出</el-button>
        	</el-breadcrumb>
        </div>

        <div id="userlists" v-for="value in tableData" highlight-current-row style="width: 100%">
          <tr>
            <td style="width: 50%">{{ value.title}}</td>
            <td style="width: 30%">{{ value.username}}</td>
            <td >{{ value.createTime | formatDate}}</td>
           </tr>
          <tr>{{ value.context}}</tr>
          <hr>
        </div>
        <div class="manage_tip">
        	<p>留言</p>
        </div>

        <el-form :model="MessageForm"  ref="MessageForm">
        					<el-form-item prop="title">
        						<el-input v-model="MessageForm.title" placeholder="留言"><span>dsfsf</span></el-input>
        					</el-form-item>
        					<el-form-item prop="password">
        						<el-input v-model="MessageForm.context" placeholder="留言内容" ></el-input>
        					</el-form-item>
        					<el-form-item>
        				    	<el-button type="primary" @click="addMessage('loginForm')" class="submit_btn">提交</el-button>
        				  	</el-form-item>
        				</el-form>
    </div>



</template>

<script>
    import headTop from '../components/headTop'
    import {formatDate} from '../common/date.js';
    export default {
        data(){
            return {
                tableData: [{
                  title: ' ',
                  username: ' ',
                  context: ' ',
                  createTime:''
                }],
                MessageForm: {
                          					title: '',
                          					context: '',
                          					userId: '',
                          					userName: ''
                          				}

            }
        },
    	components: {
    		headTop,
    	},
        created(){
            try{
                var user = JSON.parse(localStorage.user);
                            if(user == null) {
                            this.$router.push(
                                                              { path: '/'
                                                              });
                            }
                }catch(err) {
                            this.$router.push(
                                   { path: '/'});

                }
                this.getMessages();
        },
        filters: {
                formatDate:function(time) {
                    var date = new Date(time);
                    return formatDate(date, 'yyyy-MM-dd hh:mm');
                }
            },


        methods: {

            async getMessages(){
                var _this = this;
                _this.$axios.post('http://localhost:8087/message/searchMessage',{},
                            {headers:{
                                "Content-Type":"application/json;charset=utf-8"
                              },
                              withCredentials : true
                           })
                           .then(function (response) {

                                var result = response.data;
                                console.log(result);
                                if (result.status == "0") {

                                    _this.tableData = [];
                                    result.data.forEach(item => {
                                        const tableData = {};
                                        tableData.title = item.messageTitle;
                                        tableData.context = item.messageContext;
                                        tableData.username = item.userName;
                                        tableData.createTime = item.createTime;

                                        _this.tableData.push(tableData);
                                     })
                                } else {
                                                     this.$notify.error({
                                                     	title: '错误',
                                                     	message: result.msg,
                                                     	offset: 100
                                                     	});
                                                     return false;
                                                   }
                            })
                           .catch(function (error) {
                                console.log(error);
                           });
            },
            addMessage: function (messageForm) {

                          var user = JSON.parse(localStorage.user)
                          var _this = this;
                          var messageAddReqDto = new Object();

                          messageAddReqDto.title = _this.MessageForm.title;
                          messageAddReqDto.context =  _this.MessageForm.context;

                          messageAddReqDto.userId = user.userId;
                         messageAddReqDto.userName = user.userName;
                          _this.$http.post('http://localhost:8087/message/addMessage',
                                messageAddReqDto
                          ,{emulateJSON:true}
                          )
                            .then(function (response) {
                              console.log("留言成功");
                              var result = response.data;
                              console.log(result);
                              if (result.status == "0") {
                                this.getMessages();
                              } else {
                                this.$notify.error({
                                	title: '错误',
                                	message: result.msg,
                                	offset: 100
                                	});
                                return false;
                              }
                            })
                            .catch(function (error) {
                              console.log(error);
                            });
                        },
            singOut: function () {
                localStorage.clear();
                this.$router.push(
                                                                              { path: '/'
                                                                              });
            }
        }

    }
</script>

<style lang="less">
	@import '../style/mixin';
    .table_container{
        padding: 20px;
    }


</style>
